<template>
  <view class="classify">
    <view class="back" @tap="back">
      <uni-icons type="arrow-left" size="28" />
      <text class="text">我的收藏</text>
    </view>
    <scroll-view class="imgs" scroll-y :scroll-top="top" scroll-with-animation>
      <view class="list" v-if="likeImgs.length > 0">
        <view class="item" v-for="(item, index) of likeImgs" :key="index">
          <easy-loadimage @tap="viewImg(item)" mode="aspectFill" :scroll-top="oldTop"
            :image-src="item"></easy-loadimage>
          <uni-icons @tap="deleteImg(item)" class="like" type="heart-filled" color="red" size="25"></uni-icons>
        </view>
      </view>
      <view v-else class="empy">
        暂无收藏
      </view>
    </scroll-view>

    <uni-popup ref="popup" type="dialog">
      <uni-popup-dialog type="info" mode="base" title="需要取消收藏吗?" @close="close" :duration="2000" :before-close="true"
        @confirm="confirm"></uni-popup-dialog>
    </uni-popup>
  </view>
</template>

<script lang="ts" setup>
import { ref, onMounted, onBeforeUnmount } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { useLikeStore } from '@/stores'
import { storeToRefs } from 'pinia'
const { likeImgs }: any = storeToRefs(useLikeStore())
const likeStore = useLikeStore()

const top: any = ref(0)
const oldTop: any = ref(0)
const popup: any = ref(null)
let deleteUrl = ''

const viewImg = (url: string) => {
  const largeUrl = url.replace("bmiddle", "large")
  uni.navigateTo({
    url: `/pages/imgDetail/imgDetail?url=${largeUrl}`
  })
}
const deleteImg = (url: string) => {
  deleteUrl = url
  popup.value.open()
}
const confirm = () => {
  popup.value.close()
  likeStore.delImg(deleteUrl)
}
const close = () => {
  popup.value.close()
}

const back = () => {
  uni.navigateBack()
}

onLoad(() => {

})
onMounted(() => {

})
onBeforeUnmount(() => {

})
</script>

<style scoped lang="scss">
.classify {
  width: 100%;
  padding-top: var(--status-bar-height);
  height: calc(100vh - var(--window-top) - var(--window-bottom));
  display: flex;
  flex-direction: column;
  overflow: hidden;

  .back {
    padding: 10rpx;
    display: flex;
    align-items: center;
    gap: 10px;

    .text {
      font-size: 17px;
    }
  }

  .imgs {
    width: 100%;
    box-sizing: border-box;
    padding: 0 5rpx;

    .empy {
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      color: rgba(128, 128, 128, 0.529);
    }

    .list {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 5rpx;

      .item {
        width: 100%;
        border-radius: 10rpx;
        height: 600rpx;
        overflow: hidden;
        position: relative;

        .like {
          position: absolute;
          z-index: 10;
          bottom: 10rpx;
          right: 10rpx;
        }


        :deep(.easy-loadimage) {
          width: 100%;
        }

        :deep(.origin-img) {
          border-radius: 10rpx;
        }

        /* mode为widthFix即图片高度自适应时要设置占位图默认高度 */
        :deep(.loadfail-img),
        :deep(.loading-img) {
          height: 600rpx;
        }
      }
    }
  }



  .backTop {
    padding: 2px;
    position: fixed;
    display: flex;
    justify-content: center;
    align-items: center;
    right: -40px;
    bottom: 50px;
    border-radius: 50%;
    transition: all 0.4s ease-in-out;
    background-color: rgb(34, 115, 255);
    box-shadow: 0px 0px 2px white;
    z-index: 100;
  }
}
</style>